<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模具详情</title>
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="css/swiper-4.1.0.min.css" />
    <script src="js/jquery-1.10.1.min.js"></script>
    <script src="js/swiper-4.1.0.min.js"></script>
</head>
<body>
    <div class="wrapper">
        <div class="header">
            <div class="logo"></div>
            <div class="nav">
                <div class="wrapper">
                    <ul>
                        <li><a href="">首页</a></li>
                        <li><a href="">产品</a></li>
                        <li><a href="">展厅</a></li>
                        <li><a href="">定制</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="article">
                <div class="left">
                    <dl class="main-menu">
                        <dt>关于我们</dt>
                        <dd class="current"><a href="#">公司简介</a></dd>
                        <dd><a href="#">企业文化</a></dd>
                        <dd><a href="#">荣誉资质</a></dd>
                        <dd><a href="#">公司团队</a></dd>
                    </dl>
                    <dl class="sub-menu">
                        <dt>联系我们</dt>
                        <dd><i class="icon-name"></i>成都XXXXX有限公司</dd>
                        <dd><i class="icon-phone"></i>传真：010-88888888-800</dd>
                        <dd><i class="icon-contact"></i>客户热线：4000-000-000</dd>
                        <dd><i class="icon-address"></i>地址：北京市海淀区XXX大街XX号XX大厦X座XXX室</dd>
                    </dl>
                </div>
                <div class="right">
                    <div class="art-con">
                        <h1>公司简介</h1>
                        <div class="art-box">
                            <table>
                                <tr>
                                    <td align="center"><img src="images/pic02.jpg" /></td>
                                    <td align="center" valign="middle"><img src="images/pic02.jpg" /></td>
                                    <td align="center"><img src="images/pic02.jpg" /></td>
                                </tr>
                            </table>
                            <p class="des-txt">
                                XXXX网站，正式成立于2016年9月,公司前身是XXXXXXXX有限公司，致力于电子产品的制造业领域长达十年.为适应市场发出趋势，公司于2016年9月成功转型，我们已全力进军互联网行业电子商务领域。依托有“世界工厂”之称的深圳和东莞制造业基地，尤其以电子产品著称。我们先后和七家工厂签约并建立长期的合作关系，为我们向您提供最优质的产品奠定了坚实的基础，同时售后服务得到保障。让您更放心。
                            </p>
                            <p class="des-txt">
                                在我们不断的努力开拓下，我们的电子商务平台-------XXXX网站（http://www.XXXXcom）是中国市场电子网购专业平台之一。商城始终坚持以纯电子商务模式运营，缩减中间环节，为消费者在第一时间提供优质的产品及满意的服务。提供了灵活多样的消费者查询、购物等都将不受时间和地域的限制。依托多年打造的庞大物流体系，让您充分享受到"足不出户，网罗天下"的便捷。
                            </p>
                            <p class="des-txt">
                                作为中国市场的后起之秀，根据公司的战略规划， XXXX网站将被建设成为中国市场维一一家以电脑外设、数码、小家电以及电子礼品为主的批发为主的专业网站。
                            </p>
                            <p class="des-txt">
                                对待所有客户我们秉承提供具有价格优势的产品和满意的服务为宗旨，以一流的产品质量和精湛的服务体系在行业客户中赢得较高声誉。公司秉承“以质为根、以诚为本、以德为先、以信为生”的发展理念，奉行“进取求实 严谨团结”的工作方针，不断开拓创新。以服务为核心，为最高宗旨，竭诚提供性价比最高的商品及无微不至的服务。公司集销售、物流、售后于一体，让您买的安心，用的舒心！
                            </p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="footer clear">
            <div class="footer-links">
                <a href="">关于我们</a>
                <em>|</em>
                <a href="">经典案例</a>
                <em>|</em>
                <a href="">新闻动态</a>
                <em>|</em>
                <a href="">咨询团队</a>
                <em>|</em>
                <a href="">联系我们</a>
            </div>
            <div class="copyright">
                <p>Copyright © 2014-2018,www.xxxxx.com,All rights reserved</p>
            </div>
        </div>
    </div>
    <script>

        var swiper = new Swiper('.slider .swiper-container', {
            pagination: {
                el: '.swiper-pagination',
            }
        });
        //详情页图片轮播
        var viewSwiper = new Swiper('.view .swiper-container', {
            on:{
                slideChangeTransitionStart: function() {
                    updateNavPosition()
                }
            }
        })

        $('.view .arrow-left,.preview .arrow-left').on('click', function(e) {
            e.preventDefault()
            if (viewSwiper.activeIndex == 0) {
                viewSwiper.slideTo(viewSwiper.slides.length - 1, 1000);
                return
            }
            viewSwiper.slidePrev()
        })
        $('.view .arrow-right,.preview .arrow-right').on('click', function(e) {
            e.preventDefault()
            if (viewSwiper.activeIndex == viewSwiper.slides.length - 1) {
                viewSwiper.slideTo(0, 1000);
                return
            }
            viewSwiper.slideNext()
        })

        var previewSwiper = new Swiper('.preview .swiper-container', {
            //visibilityFullFit: true,
            slidesPerView: 'auto',
            allowTouchMove: false,
            on:{
                tap: function() {
                    viewSwiper.slideTo(previewSwiper.clickedIndex)
                }
            }
        })

        function updateNavPosition() {
            $('.preview .active-nav').removeClass('active-nav')
            var activeNav = $('.preview .swiper-slide').eq(viewSwiper.activeIndex).addClass('active-nav')
            if (!activeNav.hasClass('swiper-slide-visible')) {
                if (activeNav.index() > previewSwiper.activeIndex) {
                    var thumbsPerNav = Math.floor(previewSwiper.width / activeNav.width()) - 1
                    previewSwiper.slideTo(activeNav.index() - thumbsPerNav)
                } else {
                    previewSwiper.slideTo(activeNav.index())
                }
            }
        }
    </script>
</body>
</html>